<template>
  <div>
    <el-col :span="24">
      <Tabs value="name1" id="ClusterMessage">
        <TabPane label="基本信息" name="name1">
          <el-row class="row">
            <div class="center">
              <el-row :gutter="20">

                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3>基本信息</h3>
                  </el-col>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <!--            <el-col :span="24" style="padding-top: 20px">
                              <el-col :span="11">
                                <el-col :span="6">
                                  <span>Cluster基群：</span>
                                </el-col>
                                <el-col :span="15">
                                  <span>手工filter选择保存</span>
                &lt;!&ndash;                  <input type="text" class="search-input" disabled="disabled" value="手工filter选择保存">&ndash;&gt;
                                </el-col>
                              </el-col>
                              <el-col :span="11" :offset="2">
                                <el-col :span="6">
                                  <span>城市</span>
                                </el-col>
                                <el-col :span="15">
                                  <span>上海</span>
                &lt;!&ndash;                  <input type="text" class="search-input" disabled="disabled" value="上海">&ndash;&gt;
                                </el-col>
                              </el-col>
                            </el-col>-->

                <el-col :span="24" style="padding-top: 20px">
                  <el-col :span="6">
                    <div>
                      <span class="spn san green">cluster基群:手工过滤选择</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div>
                      <span class="spn san yellow">城市:上海</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div>
                      <span class="spn san dark_green">人员类型:医生</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div>
                      <span class="spn san red">科室:内分泌科</span>
                    </div>
                  </el-col>
                </el-col>

                <!--            <el-col :span="24" style="padding-top: 20px">
                              <el-col :span="11">
                                <el-col :span="6">
                                  <span>人员类型</span>
                                </el-col>
                                <el-col :span="15">
                                  <span>医生</span>
                &lt;!&ndash;                  <input type="text" class="search-input" disabled="disabled" value="医生">&ndash;&gt;
                                </el-col>
                              </el-col>
                              <el-col :span="11" :offset="2">
                                <el-col :span="6">
                                  <span>科室</span>
                                </el-col>
                                <el-col :span="15">
                                  <span>内分泌科</span>
                &lt;!&ndash;                  <input type="text" class="search-input" disabled="disabled" value="内分泌科">&ndash;&gt;
                                </el-col>
                              </el-col>
                            </el-col>-->

                <!--            <el-col :span="24" style="padding-top: 20px">
                                <el-col :span="3">
                                  <span>cluster基群</span>
                                </el-col>
                                <el-col :span="20">
                                  <input type="text" class="search-input" value="手工filter选择保存">
                                </el-col>
                            </el-col>-->

                <el-col :span="24" style="padding-top: 20px;padding-bottom: 50px">
                  <el-col :span="12">
                    <el-col :span="6">
                      <span>数量</span>
                    </el-col>
                    <el-col :span="15">
                      <span>8794</span>
                      <!--                  <input type="text" class="search-input" disabled="disabled" value="8794">-->
                    </el-col>
                  </el-col>
                  <el-col :span="12">
                    <el-col :span="6">
                      <span>生成人</span>
                    </el-col>
                    <el-col :span="15">
                      <span>DBU-YuTao</span>
                      <!--                  <input type="text" class="search-input" disabled="disabled" value="DBU-YuTao">-->
                    </el-col>
                  </el-col>
                </el-col>

              </el-row>
            </div>
          </el-row>
          <el-row class="row center">
            <el-row :gutter="20">
              <el-col :span="24" class="h">
                <el-col :span="22">
                  <h3>聚类信息</h3>
                </el-col>
              </el-col>
              <el-col :span="24">
                <el-col :span="24" style="padding-top: 10px;padding-bottom: 0px">
                  <el-col :span="8">
                    <span class="spn" style="width: 80px;">聚类名称:</span>
                    <span style="width: 300px">{{message5}}</span>
                  </el-col>
                  <el-col :span="8">
                    <span class="spn" style="width: 80px;">备注:</span>
                    <span style="width: 300px">{{message6}}</span>
                  </el-col>
                  <el-col :span="8">
                    <span class="spn" style="width: 80px;">聚类数量:</span>
                    <span style="width: 300px">{{message7}}</span>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24">
                <el-col :span="24" style="padding-top: 10px;padding-bottom: 10px">
                  <el-col :span="8">
                    <span class="spn" style="width: 80px;">创建人:</span>
                    <span style="width: 300px">{{message8}}</span>
                  </el-col>
                  <el-col :span="8">
                    <span class="spn" style="width: 80px;">创建时间:</span>
                    <span style="width: 300px">{{message9}}</span>
                  </el-col>
                </el-col>
              </el-col>
            </el-row>
          </el-row>
        </TabPane>
        <TabPane label="图谱与标签" name="name2">
          <!--聚类标签分析图例-->
          <el-row class="row">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3>聚类标签分析图例</h3>
                  </el-col>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <div :style="{width: '100%', height: '400px'}">
                    <Sanchi2></Sanchi2>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <!--聚类组、Demographic-->
          <el-row class="row" :gutter="20" v-show="isShow">
            <el-col :span="12">
              <div class="center" style="height: 150px">
                <el-row>
                  <el-col :span="24" class="h">
                    <el-col :span="22">
                      <h3>聚类组</h3>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24" style="padding: 20px 0">
                    <el-col :span="12">
                      <el-col :span="15">
                        名称：<input type="text" class="search-input" v-model="dts9" value="">
                      </el-col>
                    </el-col>
                    <el-col :span="12">
                      <el-col :span="15">
                        人数：<input type="text" class="search-input" v-model="dts0" value="">
                      </el-col>
                    </el-col>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="center" style="height: 150px">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>Demographic</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24" style="padding: 20px 0">
                    <span class="spn san green">{{dts}}</span>
                    <span class="spn san yellow">{{dts5}}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <!--Preference、Recommendation-->
          <el-row class="row" :gutter="20" v-show="isShow">
            <el-col :span="12">
              <div class="center" style="height: 150px">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>Preference</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24" style="padding: 20px 0">
                    <span class="spn san green">{{dts3}}</span>
                    <span class="spn san yellow">{{dts6}}</span>
                    <span class="spn san dark_green">{{dts7}}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="center" style="height: 150px">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>Recommendation</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24" style="padding: 20px 0">
                    <span class="spn san green">{{dts4}}</span>
                    <span class="spn san yellow">{{dts8}}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <!--通用图谱分析-->
          <el-row class="row">
            <div class="center" id="a">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="10">
                    <h3 style="display: inline-block">通用图谱分析</h3>
                    <span style="color: #fff;font-size: 15px;padding-right: 10px" @click="examineClick">展开查看</span>
                    <Icon type="ios-arrow-down"/>
                  </el-col>
                  <el-col :span="7" :offset="7">
                    <el-radio-group v-model="radio">
                      <el-radio :label="1" style="color: #fff">一周</el-radio>
                      <el-radio :label="2" style="color: #fff">一月</el-radio>
                      <el-radio :label="3" style="color: #fff;padding-right: 30px">半年</el-radio>
                    </el-radio-group>
                    <el-button size="mini" style="font-size: 12px" type="success" @click="generate">生成</el-button>
                  </el-col>
                </el-col>
              </el-row>
              <div v-show="examine">
                <!--通用图谱得分-->
                <el-row :gutter="20" class="row" style="padding-top: 20px">
                  <el-col :span="8">
                    <el-row>
                      <el-col :span="24">
                        <el-col :span="18">
                          <p>通用图谱得分</p>
                        </el-col>
                        <el-col :span="6">
                          <div>
                            <el-dropdown class="user-name" trigger="click">
                              <span style="color: #fff">全部医生<Icon type="md-arrow-dropdown"/></span>
                              <el-dropdown-menu slot="dropdown">
                                <Checkbox label="同医院" style="padding-left: 10px">同医院</Checkbox>
                                <br>
                                <Checkbox label="同级别" style="padding-left: 10px">同级别</Checkbox>
                                <br>
                                <Checkbox label="同区域" style="padding-left: 10px">同区域</Checkbox>
                                <br>
                              </el-dropdown-menu>
                            </el-dropdown>
                          </div>
                        </el-col>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <div :style="{width: '100%', height: '400px'}">
                          <charts15 v-show="charts15Show"></charts15>
                          <charts15_2 v-show="charts15_2Show"></charts15_2>
                          <charts15_3 v-show="charts15_3Show"></charts15_3>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="8">
                    <el-row>
                      <el-col :span="24">
                        <p>影响力分布</p>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <div :style="{width: '100%', height: '400px'}">
                          <charts1 v-show="charts1Show"></charts1>
                          <charts1_1 v-show="charts1_1Show"></charts1_1>
                          <charts1_2 v-show="charts1_2Show"></charts1_2>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="8">
                    <el-row>
                      <el-col :span="24">
                        <p>研究方向</p>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <div :style="{width: '100%', height: '400px'}">
                          <charts2 v-show="charts2Show"></charts2>
                          <charts2_2 v-show="charts2_2Show"></charts2_2>
                          <charts2_3 v-show="charts2_3Show"></charts2_3>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <!--渠道偏好-->
                <el-row class="row">
                  <div>
                    <el-row>
                      <el-col :span="24" class="h">
                        <p>渠道偏好</p>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <div :style="{width: '100%', height: '400px'}">
                          <charts11_1/>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-row>
                <!--关注内容-->
                <el-row class="row">
                  <div>
                    <el-row>
                      <el-col :span="24" class="h">
                        <p>关注内容</p>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <div :style="{width: '100%', height: '400px'}">
                          <charts13 v-if="hackReset"></charts13>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-row>
              </div>
            </div>
          </el-row>
          <!--疾病图谱变化-->
          <el-row class="row">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="10">
                    <h3 style="display: inline-block">疾病图谱变化</h3>
                    <span style="color: #fff;font-size: 15px;padding-right: 10px" @click="examineClick2">展开查看</span>
                    <Icon type="ios-arrow-down"/>
                  </el-col>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <div v-show="examine2">
                    <comparison v-if="renovate"></comparison>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <!--标签分析-->
          <el-row class="row">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="10">
                    <h3 style="display: inline-block">标签分析</h3>
                    <span style="color: #fff;font-size: 15px;padding-right: 10px" @click="examineClick3">展开查看</span>
                    <Icon type="ios-arrow-down"/>
                  </el-col>
                  <el-col :span="7" :offset="7">
                    <el-radio-group v-model="radio">
                      <el-radio :label="1" style="color: #fff">一周</el-radio>
                      <el-radio :label="2" style="color: #fff">一月</el-radio>
                      <el-radio :label="3" style="color: #fff;padding-right: 30px">半年</el-radio>
                    </el-radio-group>
                    <el-button size="mini" style="font-size: 12px" type="success" @click="generate1">生成</el-button>
                  </el-col>
                </el-col>
              </el-row>
              <el-row class="row" v-show="examine3">
                <el-col :span="11">
                  <div class="center">
                    <el-row>
                      <el-col :span="24" class="h">
                        <el-col :span="21"><p>标签选择</p></el-col>
                        <el-col :span="3">
                          <Button type="default" ghost @click="ClassLabel">确定</Button>
                        </el-col>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <Label></Label>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
                <el-col :span="11" :offset="2">
                  <div class="center">
                    <el-row>
                      <el-col :span="24" class="h">
                        <p>类标签</p>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <div style="height: 500px">
                          <ClassLabel v-show="ClassLabels"></ClassLabel>
                          <ClassLabel_2 v-show="ClassLabels_2"></ClassLabel_2>
                          <ClassLabel_3 v-show="ClassLabels_3"></ClassLabel_3>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <!--内容倾向-->
          <el-row class="row">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3 style="display: inline-block">内容倾向</h3>
                    <span style="color: #fff;font-size: 15px;padding-right: 10px" @click="examineClick4">展开查看</span>
                    <Icon type="ios-arrow-down"/>
                  </el-col>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" style="padding-top: 20px">
                  <Sanchi1 v-show="examine4"></Sanchi1>
                </el-col>
              </el-row>
            </div>
          </el-row>
        </TabPane>
        <TabPane label="Journey" name="name3">
          <!--          <el-row class="row">
                      <div class="center">
                        <el-row :gutter="20">
                          <el-col :span="24" class="h">
                            <el-col :span="22">
                              <h3>聚类标签分析图例</h3>
                            </el-col>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">
                          <el-col :span="24">
                            <div :style="{width: '100%', height: '400px'}">
                              <Sanchi3></Sanchi3>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </el-row>-->
          <!--Journey设计-->
          <el-row class="row">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3>Journey设计</h3>
                  </el-col>
                  <el-col :span="2">
                    <Icon type="md-add-circle" size="25" @click="modal1 = true"/>
                    <Icon type="ios-aperture" size="25"/>
                  </el-col>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <div :style="{width: '100%'}">
                    <div style="padding-top: 10px;padding-bottom: 30px">
                      <table class="table" style="width: 100%">
                        <thead style="text-align: left;font-size: 15px">
                        <tr>
                          <th style="width: 20%">渠道</th>
                          <th style="width: 20%">内容类别</th>
                          <th style="width: 20%">内容</th>
                          <th style="width: 20%">时间</th>
                          <th style="width: 20%">操作</th>
                        </tr>
                        </thead>
                        <tbody class="tbdy">
                        <tr v-for="(tableData,index) in tableData" class="tr">
                          <td>{{tableData.channel}}</td>
                          <td>{{tableData.category}}</td>
                          <td>{{tableData.content}}</td>
                          <td>{{tableData.time}}</td>
                          <td>
                            <el-button style="background: #e85656" size="mini" @click="delPerson(index)">删除</el-button>
                            <el-button size="mini" @click="open1 = true">查看</el-button>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-row>

          <Modal
            v-model="modal1"
            title="Journey"
            @on-ok="ok">
            <div>
              <el-row :gutter="20">
                <el-col :span="24">
                  <div>
                    <span class="spn" style="width: 70px;">渠道:</span>
                    <Select v-model="value7" style="width:400px" placeholder="请输入">
                      <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </div>
                </el-col>
                <el-col :span="24" style="padding-top: 20px">
                  <div>
                    <span class="spn" style="width: 70px;">内容类别:</span>
                    <Select v-model="value8" style="width:400px" placeholder="请输入">
                      <Option v-for="item in cities" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </div>
                </el-col>
                <el-col :span="24" style="padding-top: 20px">
                  <div>
                    <span class="spn" style="width: 70px;">内容:</span>
                    <Select v-model="value9" style="width:400px" placeholder="请输入">
                      <Option v-for="item in cities1" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </div>
                </el-col>
                <el-col :span="24" style="padding-top: 20px">
                  <div>
                    <span class="spn" style="width: 70px;">时间:</span>
                    <DatePicker id="DatePicker" type="date" placeholder="选择日期" format="yyyy/MM/dd"
                                @on-change="date=$event"></DatePicker>
                  </div>
                </el-col>
              </el-row>
            </div>
          </Modal>

          <Modal
            title="微信公众号"
            v-model="open1"
            :mask-closable="false" width="600" id="Modal">
            <el-row>
              <el-col :span="24">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div>
                      <clusterPie></clusterPie>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div>
                      <clusterPie2></clusterPie2>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <div @click="OpenRateClick" style="font-size: 15px">
                      打开率详细信息
                      <Icon type="ios-arrow-down"/>
                    </div>
                    <div v-show="OpenRate">
                      <div>
                        <el-table
                          border
                          :data="tableData1"
                          style="width: 100%">
                          <el-table-column
                            prop="name"
                            label="医生" width="70">
                          </el-table-column>
                          <el-table-column
                            prop="hospital"
                            label="医院">
                          </el-table-column>
                          <el-table-column
                            prop="date"
                            label="打开时间" width="150">
                          </el-table-column>
                          <el-table-column
                            prop="address"
                            label="阅读时长" width="80">
                          </el-table-column>
                        </el-table>
                      </div>
                      <div style="float: right;padding-top: 10px">
                        <Page :total="100"/>
                        <!--                      <Button type="primary">上一页</Button>
                                              <Button type="primary">下一页</Button>
                                              <span>共<span>1</span>页</span>-->
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div @click="OpenRateClick2" style="font-size: 15px">
                      转发率详细信息
                      <Icon type="ios-arrow-down"/>
                    </div>
                    <div v-show="OpenRate2">
                      <div>
                        <el-table
                          border
                          :data="tableData2"
                          style="width: 100%">
                          <el-table-column
                            prop="name"
                            label="医生" width="70">
                          </el-table-column>
                          <el-table-column
                            prop="hospital"
                            label="医院">
                          </el-table-column>
                          <el-table-column
                            prop="date"
                            label="转发时间" width="150">
                          </el-table-column>
                          <el-table-column
                            prop="address"
                            label="转发次数" width="80">
                          </el-table-column>
                        </el-table>
                      </div>
                      <div style="float: right;padding-top: 10px">
                        <Page :total="100"/>
                        <!--                      <Button type="primary">上一页</Button>
                                              <Button type="primary">下一页</Button>
                                              <span>共<span>1</span>页</span>-->
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-col>

              <el-col :span="24">
                <a @click="open2 = true" style="font-size: 15px;color: blue!important">查看通用图谱</a>
              </el-col>
            </el-row>
          </Modal>

          <Modal
            title="通用图谱分析"
            v-model="open2"
            :mask-closable="false"
            width="1300"
            id="atlas"
          >

            <div>
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="7" :offset="17">
                    <el-radio-group v-model="radio">
                      <el-radio :label="1">一周</el-radio>
                      <el-radio :label="2">一月</el-radio>
                      <el-radio :label="3" style="padding-right: 30px">半年</el-radio>
                    </el-radio-group>
                    <el-button size="mini" style="font-size: 12px" type="success" @click="generate">生成</el-button>
                  </el-col>
                </el-col>
              </el-row>
              <div>
                <!--通用图谱得分-->
                <el-row :gutter="20" class="row" style="padding-top: 20px">
                  <el-col :span="8">
                    <el-row>
                      <el-col :span="24">
                        <el-col :span="18">
                          <p>通用图谱得分</p>
                        </el-col>
                        <el-col :span="6">
                          <div>
                            <el-dropdown class="user-name" trigger="click">
                              <span style="color: #fff">全部医生<Icon type="md-arrow-dropdown"/></span>
                              <el-dropdown-menu slot="dropdown">
                                <Checkbox label="同医院" style="padding-left: 10px">同医院</Checkbox>
                                <br>
                                <Checkbox label="同级别" style="padding-left: 10px">同级别</Checkbox>
                                <br>
                                <Checkbox label="同区域" style="padding-left: 10px">同区域</Checkbox>
                                <br>
                              </el-dropdown-menu>
                            </el-dropdown>
                          </div>
                        </el-col>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <div :style="{width: '100%', height: '400px'}">
                          <charts15 v-show="charts15Show"></charts15>
                          <charts15_2 v-show="charts15_2Show"></charts15_2>
                          <charts15_3 v-show="charts15_3Show"></charts15_3>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="8">
                    <el-row>
                      <el-col :span="24">
                        <span>影响力分布</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <div :style="{width: '100%', height: '400px'}">
                          <charts1 v-show="charts1Show"></charts1>
                          <charts1_1 v-show="charts1_1Show"></charts1_1>
                          <charts1_2 v-show="charts1_2Show"></charts1_2>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="8">
                    <el-row>
                      <el-col :span="24">
                        <p>研究方向</p>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <div :style="{width: '100%', height: '400px'}">
                          <charts2 v-show="charts2Show"></charts2>
                          <charts2_2 v-show="charts2_2Show"></charts2_2>
                          <charts2_3 v-show="charts2_3Show"></charts2_3>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <!--渠道偏好-->
                <el-row class="row">
                  <div>
                    <el-row>
                      <el-col :span="24" class="h">
                        <span>渠道偏好</span>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <div :style="{width: '100%', height: '400px'}">
                          <charts11_2/>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-row>
                <!--关注内容-->
                <el-row class="row">
                  <div>
                    <el-row>
                      <el-col :span="24" class="h">
                        <span>关注内容</span>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="24">
                        <div :style="{width: '1200px', height: '400px'}">
                          <charts13_1></charts13_1>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-row>
              </div>
            </div>

          </Modal>

        </TabPane>
      </Tabs>
    </el-col>
  </div>
</template>

<script>
  import bus from '../../bus';
  import Sanchi2 from './Sanchi2'
  import Sanchi1 from './Sanchi'
  import ClassLabel from './son/ClassLabel'
  import ClassLabel_2 from './son/ClassLabel_2'
  import ClassLabel_3 from './son/ClassLabel_3'
  import Label from './Label'
  import Sanchi3 from './Sanchi3'
  import clusterPie from './cluster-pie'
  import clusterPie2 from './cluster-pie2'
  import diagram from './diagram'
  import charts15 from './son/charts15'
  import charts15_2 from './son/charts15_2'
  import charts15_3 from './son/charts15_3'
  import charts1 from './son/charts1'
  import charts1_1 from './son/charts1_1'
  import charts1_2 from './son/charts1_2'
  import charts2 from './son/charts2'
  import charts2_2 from './son/charts2_2'
  import charts2_3 from './son/charts2_3'
  import charts11 from './charts11'
  import charts11_1 from './charts11_1'
  import charts11_2 from './son/charts11_2'
  import charts13_1 from './son/charts13_1'
  import charts13 from './charts13'
  import comparison from './son/comparison'

  export default {
    components: {
      Sanchi2,
      Sanchi1,
      ClassLabel,
      ClassLabel_2,
      ClassLabel_3,
      Label,
      Sanchi3,
      clusterPie,
      clusterPie2,
      diagram,
      charts15,
      charts15_2,
      charts15_3,
      charts1,
      charts1_1,
      charts1_2,
      charts2,
      charts2_2,
      charts2_3,
      charts11,
      charts13,
      charts11_1,
      charts11_2,
      charts13_1,
      comparison
    },
    data() {
      return {
        modal1: false,
        isShow: false,
        isShow1: false,
        open1: false,
        open2: false,
        dts0: '',
        dts: '内分泌与代谢病科',
        dts5: '主治医师',

        dts2: '对GLP-1关注度高',

        dts3: '治疗方案',
        dts6: '诊断和分类',
        dts7: '并发症管理',

        dts4: 'beginner-medium level of content',
        dts8: 'conventional treatment-related information',

        dts9: '',
        message5: '聚类名称',
        message6: '备注',
        message7: '123',
        message8: 'DBU-YuTao',
        message9: '2018-10-10',
        tableData: [
          {channel: '微信survey', category: 'Survey', content: '糖尿病患者用药调研', time: '2011/04/25'},
          {channel: '微信公众号', category: '微信内容', content: '医生上网习惯调研', time: '2011/04/25'}
        ],
        options: [
          {
            value: '微信survey',
            label: '微信survey'
          },
          {
            value: '微信公众号',
            label: '微信公众号'
          },
          {
            value: '会议',
            label: '会议'
          },
          {
            value: '邮件',
            label: '邮件'
          },
          {
            value: '拜访',
            label: '拜访'
          },
        ],
        options1: [
          {
            value: 'Survey',
            label: 'Survey',
            parent: '微信survey'
          },
          {
            value: '微信内容',
            label: '微信内容',
            parent: '微信公众号'
          },
          {
            value: '线下会议',
            label: '线下会议',
            parent: '会议'
          },
          {
            value: '邮件',
            label: '邮件',
            parent: '邮件'
          },
          {
            value: '线下拜访',
            label: '线下拜访',
            parent: '拜访'
          },
          {
            value: '线上拜访',
            label: '线上拜访',
            parent: '拜访'
          },
          {
            value: '科室会',
            label: '科室会',
            parent: '拜访'
          },
        ],
        options2: [
          {
            value: '糖尿病患者用药调研',
            label: '糖尿病患者用药调研',
            parent: 'Survey'
          },
          {
            value: '医生上网习惯调研',
            label: '医生上网习惯调研',
            parent: 'Survey'
          },
          {
            value: '重症感染的经验性抗生素治疗：走出误区',
            label: '重症感染的经验性抗生素治疗：走出误区',
            parent: '微信内容'
          },
          {
            value: '中华医学会第十七次全国内分泌学学术会议',
            label: '中华医学会第十七次全国内分泌学学术会议',
            parent: '线下会议'
          },
          {
            value: '2018中国肿瘤学大会',
            label: '2018中国肿瘤学大会',
            parent: '线下会议'
          },
          {
            value: '2018中国肿瘤学大会',
            label: '2018中国肿瘤学大会',
            parent: '线下会议'
          },
        ],
        value1: '',
        value7: '',
        value8: '',
        value9: '',
        date: '',
        ClassLabels: false,
        ClassLabels_2: false,
        ClassLabels_3: false,

        OpenRate: false,
        OpenRate2: false,
        radio: 1,

        charts15Show: true,
        charts15_2Show: false,
        charts15_3Show: false,

        charts1Show: true,
        charts1_1Show: false,
        charts1_2Show: false,

        charts2Show: true,
        charts2_2Show: false,
        charts2_3Show: false,

        examine: false,
        examine2: false,
        examine3: false,
        examine4: false,

        hackReset: true,
        renovate: true,

        tableData1: [
          {
            date: '2016-05-02 13:20',
            name: '李艳波',
            hospital: '哈尔滨医科大学附属第一医院',
            address: '9'
          }, {
            date: '2016-05-04 14:50',
            name: '严励',
            hospital: '中山大学孙逸仙纪念医院',
            address: '5'
          }, {
            date: '2016-05-01 17:30',
            name: '刘超',
            hospital: '江苏省中西医结合医院',
            address: '6'
          }, {
            date: '2016-05-03 19:40',
            name: '朱大龙',
            hospital: '南京市鼓楼医院',
            address: '3'
          }, {
            date: '2016-05-03 19:40',
            name: '余学锋',
            hospital: '华中科技大学同济医学院附属同济医院',
            address: '3'
          }, {
            date: '2016-05-03 19:40',
            name: '徐静',
            hospital: '西安交通大学医学院第二附属医院',
            address: '3'
          }],
        tableData2: [
          {
            date: '2016-05-02 10:40',
            name: '宋光耀',
            hospital: '河北省人民医院',
            address: '5'
          }, {
            date: '2016-05-04 13:40',
            name: '杨丽辉',
            hospital: '西藏自治区人民医院',
            address: '9'
          }, {
            date: '2016-05-01 16:40',
            name: '祝之明',
            hospital: '陆军军医大学大坪医院',
            address: '12'
          }, {
            date: '2016-05-03 18:40',
            name: '薛耀明',
            hospital: '南方医科大学南方医院',
            address: '7'
          }, {
            date: '2016-05-03 18:40',
            name: '李冬梅',
            hospital: '内蒙古自治区人民医院',
            address: '7'
          }, {
            date: '2016-05-03 18:40',
            name: '冯波',
            hospital: '上海市浦东新区东方医院',
            address: '7'
          }]
      }
    },
    created() {
      bus.$on('isShow', receive => {
        this.isShow = receive
      });
      bus.$on('dts', receive => {
        this.dts0 = receive
      });
      bus.$on('dts1', receive => {
        this.dts9 = receive
      });
    },
    watch: {
      value7() {
        this.value8 = '';
      },
      value8() {
        this.value9 = ''
      },
    },
    computed: {
      cities() {
        return this.options1.filter(item => item.parent === this.value7)
      },
      cities1() {
        return this.options2.filter(item => item.parent === this.value8)
      },
    },
    mounted() {
      this.a()
    },
    methods: {
      ok() {
        this.tableData.push({channel: this.value7, category: this.value8, content: this.value9, time: this.date})
      },
      delPerson(index) {
        this.tableData.splice(index, 1);
      },
      OpenRateClick() {
        this.OpenRate = !this.OpenRate
      },
      OpenRateClick2() {
        this.OpenRate2 = !this.OpenRate2;
      },
      ClassLabel() {
        this.ClassLabels = true
      },
      generate() {
        if (this.radio == 1) {
          this.charts15Show = true;
          this.charts15_2Show = false;
          this.charts15_3Show = false;
          this.charts1Show = true;
          this.charts1_1Show = false;
          this.charts1_2Show = false;
          this.charts2Show = true;
          this.charts2_2Show = false;
          this.charts2_3Show = false
        } else if (this.radio == 2) {
          this.charts15Show = false;
          this.charts15_2Show = true;
          this.charts15_3Show = false;
          this.charts1Show = false;
          this.charts1_1Show = true;
          this.charts1_2Show = false;
          this.charts2Show = false;
          this.charts2_2Show = true;
          this.charts2_3Show = false
        } else if (this.radio == 3) {
          this.charts15Show = false;
          this.charts15_2Show = false;
          this.charts15_3Show = true;
          this.charts1Show = false;
          this.charts1_1Show = false;
          this.charts1_2Show = true;
          this.charts2Show = false;
          this.charts2_2Show = false;
          this.charts2_3Show = true
        }
      },
      generate1() {
        if (this.radio == 1) {
          this.ClassLabels = true;
          this.ClassLabels_2 = false;
          this.ClassLabels_3 = false;
        } else if (this.radio == 2) {
          this.ClassLabels = false;
          this.ClassLabels_2 = true;
          this.ClassLabels_3 = false;
        } else if (this.radio == 3) {
          this.ClassLabels = false;
          this.ClassLabels_2 = false;
          this.ClassLabels_3 = true;
        }
      },
      examineClick() {
        this.examine = !this.examine;
        this.hackReset = false;
        this.$nextTick(() => {
          this.hackReset = true
        })
      },
      examineClick2() {
        this.examine2 = !this.examine2;
        this.renovate = false;
        this.$nextTick(() => {
          this.renovate = true
        })
      },
      examineClick3() {
        this.examine3 = !this.examine3;
      },
      examineClick4() {
        this.examine4 = !this.examine4;
      },
      a() {
        $('#app').attr("title", "")
      },
    },
  }
</script>

<style scoped>
  .btn {
    width: 100%;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    background: #fff;
    border: 1px solid transparent;
    /*    outline: none;*/
  }

  .basic {
    background-color: rgba(245, 245, 248, 0.1);
    margin-top: 50px;
  }

  .basic > div {
    color: #fff;
    padding: 15px 20px;
  }

  .row {
    padding-bottom: 30px;
  }

  .center {
    padding: 10px 40px;
    color: #fff;
    border-radius: 10px;
    background-image: url("../../../assets/blur-bg-blurred.jpg");
  }

  .h {
    border-bottom: 2px solid #fff;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }

  .el-button {
    background: #1f9f91;
    border: none;
    color: #fff;
    font-size: 15px;
  }

  span {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
  }

  .search-input {
    margin-left: -8px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 25px;
    width: 100%;
  }

  .el-card {
    background-color: rgba(245, 245, 248, 0);
    border: none;
  }

  table {
    border-collapse: collapse;
  }

  table, th, td {
    border-bottom: 1px solid #fff;
  }

  th, td {
    padding: 10px;
  }

  .spn {
    display: inline-block;
    /*    width: 70px;*/
  }

  .san {
    display: inline-block;
    padding: 0 10px;
    margin: 5px;
    border-radius: 5px;
  }

  .green {
    background-color: #7b9e02;
  }

  .yellow {
    background-color: #deb81b;
  }

  .dark_green {
    background-color: #1f9e91;
  }

  .red {
    background-color: #e85656;
  }
</style>
<style>
  .ivu-tabs-nav {
    width: 100%;
  }

  #ClusterMessage > .ivu-tabs-bar > .ivu-tabs-nav-container > .ivu-tabs-nav-wrap > .ivu-tabs-nav-scroll > .ivu-tabs-nav > div {
    width: 33.3%;
    text-align: center;
  }

  .ivu-tabs-tab {
    color: #fff;
    font-size: 20px;
  }

  .ivu-tabs-ink-bar {
    background-color: #e85656 !important;
    height: 5px !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -5px !important;
  }

  .ivu-tabs-nav .ivu-tabs-tab-active {
    color: #fff !important;
    font-weight: bold !important;
  }

  .ivu-tabs-nav {
    border-bottom: 5px solid #fff !important;
  }

  .el-collapse-item__header {
    background-color: rgba(245, 245, 248, 0) !important;
    color: #fff !important;
  }

  .el-collapse-item__wrap {
    background-color: rgba(245, 245, 248, 0) !important;
    color: #fff !important;
  }

  .el-collapse-item__content {
    color: #fff !important;
  }

  #Modal > .ivu-modal-wrap > .ivu-modal > .ivu-modal-content {
    animation: myfirst 2s;
    -webkit-animation: myfirst 2s;
  }

  @-webkit-keyframes myfirst {
    0% {
      top: 1000px;
    }
    100% {
      top: 0px;
    }
  }

  #DatePicker > .ivu-date-picker-rel > .ivu-input-wrapper {
    width: 400px;
    padding-left: 0px;
  }

  #atlas > .ivu-modal-wrap > .ivu-modal > .ivu-modal-content {
    /*    background: none;*/
  }
  .amcharts-chart-div a {display:none !important;}
</style>
